<template>
    <div id="intention">
        <Header :goback="goback" title="求职意向"></Header>
        <div class="topheader title">
            <div class="font40 fontBlack2 textL">添加求职意向</div>
            <div class="title_tip font28 fontBlack73 textL">求职意向的不同，推荐的职位也会不同</div>
            <div class="disFlex job pt52">
                <div class="font28 fontBlack2">工作性质</div>
                <div class="disFlex job1">
                    <span class="job_content font28" :class="item.value == job_active? 'active': 'unactive'" @click="select_job(item)" v-for="(item, i) in job" :key="i">{{item.text}}</span>
                </div>
            </div>
            <div @click="totrade" class="disFlex job">
                <div class="textL">
                    <div class="fontBlack73 font28">期望行业</div>
                    <div v-if="storeData.profession" class="job_max font32 fontBlack2">{{profession.join(',')}}</div>
                    <div v-else class="job_max font32 fontBlack2">不限</div>
                </div>
                <img class="jobimg_width" :src="require('@/assets/images/chevron-right.png')" alt="">
            </div>
            <div @click="tostation" class="disFlex job">
                <div class="textL">
                    <div class="fontBlack73 font28">期望岗位</div>
                    <div v-if="resume.length > 0" class="job_max font32 fontBlack2">
                        <span v-for="(item, i) in resume">{{item.twoname}}<span v-if="i != resume.length -1">、</span></span>
                    </div>
                    <div v-else class="job_max font32 fontGrayB9">请选择</div>
                </div>
                <img class="jobimg_width" :src="require('@/assets/images/chevron-right.png')" alt="">
            </div>
            <div @click="popSalary" class="disFlex job">
                <div class="textL">
                    <div class="fontBlack73 font28">期望薪资</div>
                    <div v-if="storeData.wageUpper && storeData.wageLower" class="job_max font32 fontBlack2">{{storeData.wageLower}}K - {{storeData.wageUpper}}K</div>
                    <div v-else class="job_max font32 fontGrayB9">请选择</div>
                </div>
                <img class="jobimg_width" :src="require('@/assets/images/chevron-right.png')" alt="">
            </div>
            <div @click="popClick('address')" class="disFlex job">
                <div class="textL">
                    <div class="fontBlack73 font28">工作地点</div>
                    <div v-if="storeData.workPlace" class="job_max font32 fontBlack2">{{data.workPlace}}</div>
                    <div v-else class="job_max font32 fontBlack2">不限</div>
                </div>
                <img class="jobimg_width" :src="require('@/assets/images/chevron-right.png')" alt="">
            </div>
            <div @click="popClick('state')" class="disFlex job">
                <div class="textL">
                    <div class="fontBlack73 font28">求职状态</div>
                    <div v-if="storeData.jobHuntStatus || storeData.jobHuntStatus == 0" class="job_max font32 fontBlack2">{{data.jobHuntStatus}}</div>
                    <div v-else class="job_max font32 fontGrayB9">请选择</div>
                </div>
                <img class="jobimg_width" :src="require('@/assets/images/chevron-right.png')" alt="">
            </div>
            <div @click="save" class="save">保存</div>
        </div>
        <van-popup :show="show" round position="bottom">
            <van-picker
                :columns="columns"
                @cancel="show = false"
                @confirm="submit"
                value-key="name"
            />
        </van-popup>
        <DialogBtn :title="'是否保存当前页面'" :show="exitshow"></DialogBtn>
        <van-popup :show="tshow" round position="bottom">
            <van-picker @change="tschange" :columns="tcolumns" @cancel="tshow = false" @confirm="tsubmit" />
        </van-popup>
    </div>
</template>
<script>
import Header from '@/components/header.vue'
import DialogBtn from '@/components/dialogbtn.vue';
import { getCurrentInstance, reactive } from 'vue'
import { Toast } from 'vant';
export default {
    components: {
        Header,
        DialogBtn
    },
    data() {
        return {
            job: [],
            job_active: '',
            columns: [],
            tcolumns: [{
                values: ['1K', '2K', '3K', '4K', '5K'],
                defaultIndex: 0
            },{
                values: [],
                defaultIndex: 0
            }],
            selectPop: '',
            show: false,
            tshow: false,
            api: '',
            token: '',
            storeData: {},
            dict: [], //工作地点
            data: {},
            resume: [], //临时显示数据
            exitshow: false,
            profession: [], //期望行业
            idcard: this.$store.state.idCard
        }
    },
    mounted() {
        this.api = getCurrentInstance().appContext.config.globalProperties.$http;
        this.token = this.$store.state.token;
        var that = this;
        var intention = that.$store.state.resumeqz;
        var resume = that.$store.state.resumeName;
        that.api.get('/personnel/h5/resumeInfo/queryOne', {identityNumber: that.idcard}).then(res => {
            var data = res.data;
            if(intention.jobHuntStatus || intention.jobCategory || intention.wageLower || intention.wageUpper || intention.workPlace || resume.length > 0 || intention.profession) {
                that.storeData = intention;
                if(!that.storeData.identityNumber) {
                    that.storeData.identityNumber = that.token;
                }
                that.resume = resume;
            } else {
                if(data.resumeInfo && data.resumeInfo.id) {
                    that.storeData = data.resumeInfo;
                    that.$store.commit('setresumeqz', that.storeData);
                    if(data.resumeIndustryInfoList.length > 0) {
                        var arr = [];
                        for(let i = 0; i < data.resumeIndustryInfoList.length; i++) {
                            var obj = {};
                            obj.oneLevel = data.resumeIndustryInfoList[i].oneLevel;
                            obj.twoLevel = data.resumeIndustryInfoList[i].twoLevel;
                            arr.push(obj);
                        };
                        that.$store.commit('setresumeIndustryInfoList', arr);
                    }
                } else {
                    that.storeData = intention;
                }
            }
            that.getMy(that.storeData);// 数据回显
        })
    },
    methods: {
        // 返回回调
        goback() {
            this.exitshow = true;
        },
        ispopClose() {
            this.$store.commit('setresumeqz', {});
            this.$store.commit('setresumeIndustryInfoList', []);
            this.$store.commit('setresumeName', []);
            this.$router.replace('/resume');
        },
        ispopSub(value, index, type) {
            var that = this;
            var data = {};
            data.memberResumeInfo = that.storeData;
            data.memberResumeInfo.wageUpper = parseInt(data.memberResumeInfo.wageUpper);
            data.memberResumeInfo.wageLower = parseInt(data.memberResumeInfo.wageLower);
            data.resumeIndustryInfoList = that.$store.state.resumeIndustryInfoList;
            if(JSON.stringify(data.memberResumeInfo.jobHuntStatus) != "" && data.memberResumeInfo.profession && data.memberResumeInfo.jobCategory && data.memberResumeInfo.wageLower && data.memberResumeInfo.wageUpper && data.memberResumeInfo.workPlace) {
                that.api.post('/personnel/h5/resumeInfo/addOrEditJobHunt', data).then(res => {
                    if(res.code) {
                        this.$store.commit('setresumeqz', {});
                        this.$store.commit('setresumeIndustryInfoList', []);
                        this.$store.commit('setresumeName', []);
                        this.$router.replace('/resume');
                    }
                }).catch(err => {
                    that.exitshow = false;
                })
            } else {
                that.exitshow = false;
                Toast('请填写全部信息');
            }
        },
        // 薪资第一列变化的时候
        tschange(name) {
            var data = parseInt(name[0].replace('K', ''));
            this.tcolumns[1].values = [];
            for(let i = data + 1; i < data+50;i++) {
                this.tcolumns[1].values.push(i + 'K');
            }
        },
        // 数据回显
        getMy(data) {
            var that = this;
            that.tcolumns[0].values = [];
            that.tcolumns[1].values = [];
            for(let i = 1; i < 50; i++) {
                that.tcolumns[0].values.push(i+ 'K');
            };
            for(let i = 2; i < 51; i++) {
                that.tcolumns[1].values.push(i+ 'K');
            }
            if(data.jobHuntStatus) {
                if(data.jobHuntStatus == 0) {
                    that.data.jobHuntStatus = '在职';
                } else if(data.jobHuntStatus == 1) {
                    that.data.jobHuntStatus = '待业';
                }
            }
            that.getType(); //获取工作性质
            that.getDept(); //获取工作区域
            if(data.profession) {
                that.getindustry(); //获取行业下拉框
            }
            var resumeIndustryInfoList = that.$store.state.resumeIndustryInfoList;
            if(resumeIndustryInfoList.length > 0) {
                that.getpostdict(resumeIndustryInfoList); // 查询岗位下拉树
            }
        },
        // 获取岗位下拉树
        getpostdict(data) {
            var that = this;
            that.api.get('/personnel/h5/resumeInfo/getPostDictTree', {}).then(res => {
                var data1 = res.data;
                var InfoList = data;
                var arr = [];
                InfoList.forEach(el => {
                    var obj = {};
                    data1.forEach(val => {
                        if(el.oneLevel == val.code) {
                            obj.onename = val.chName;
                            val.children.forEach(v => {
                                v.children.forEach(t => {
                                    if(t.code == el.twoLevel) {
                                        obj.twoname = t.chName;
                                    }
                                })
                            })
                        }
                    });
                    arr.push(obj);
                })
                that.resume = arr;
                that.$store.commit('setresumeName', that.resume);
            })
        },
        // 获取行业下拉框
        getindustry() {
            var that = this;
            that.api.get('/personnel/h5/resumeInfo/getIndustryTree', {}).then(res => {
                var data = res.data;
                var profession = that.storeData.profession.split(',');
                var arr = [];
                data.forEach(el => {
                    el.children.forEach(val => {
                        profession.forEach(t => {
                            if(val.code == t) {
                                arr.push(val.chName);
                            }
                        })
                    })
                });
                that.profession = arr;
            })
        },
        // 获取工作区域
        getDept() {
            var that = this;
            that.api.get('/personnel/h5/resumeInfo/getDeptTree', {}).then(res => {
                var data = res.data;
                var arr = [];
                for(let i in data) {
                    var obj = {};
                    obj.name = data[i];
                    obj.value = i;
                    arr.push(obj);
                    if(that.storeData.workPlace == obj.value) {
                        that.data.workPlace = obj.name;
                    }
                };
                for(let i = 0; i < arr.length; i++) {
                    if(arr[i].name == '全部区域') {
                        arr.splice(0, 0, arr[i]);
                        arr.splice(i+1, 1);
                    }
                }
                that.dict = arr;
            })
        },
        // 获取工作性质列表
        getType() {
            var that = this;
            that.api.get('/personnel/h5/resumeInfo/positionType', {}).then(res=> {
                var data = res.data.positionType;
                var arr = [];
                for(let i = 0; i < data.length; i++) {
                    var obj = {};
                    obj.text = data[i].dictLabel;
                    obj.value = data[i].dictValue;
                    arr.push(obj);
                };
                that.job = arr;
                that.job_active = that.storeData.jobCategory;
            })
        },
        // 选中某一个工作性质
        select_job(item) {
            this.job_active = item.value;
            this.storeData.jobCategory = item.value;
            this.$store.commit('setmyInfo', this.storeData);
        },
        // 确认选择弹窗内容
        submit(value, index) {
            if(this.selectPop == 'address') { //工作地点
                this.storeData.workPlace = value.value;
                this.data.workPlace = value.name;
            } else if(this.selectPop == 'state') { //求职状态
                this.storeData.jobHuntStatus = value.value;
                this.data.jobHuntStatus = value.name;
            }
            this.$store.commit('setmyInfo', this.storeData);
            this.show = false;
        },
        // 弹出弹窗并入参确定参数name
        popClick(name) {
            this.selectPop = name;
            if(name == 'address') {
                this.columns = this.dict;
            } else if(name == 'state') {
                this.columns = [{name: '待业', value: 1}, {name: '在职', value: 0}]
            }
            this.show = true;
        },
        // 期望薪资弹窗
        popSalary() {
            this.tshow = true;
        },
        // 期望薪资确认
        tsubmit(value) {
            if(value[0] && value[1]) {
                var wageLower = value[0].replace('K', '');
                var wageUpper = value[1].replace('K', '');
                this.storeData.wageUpper = wageUpper;
                this.storeData.wageLower = wageLower;
                this.tshow = false;
            }
        },
        // 跳转行业选择
        totrade() {
            this.$router.push('/trade');
        },
        // 跳转期望岗位
        tostation() {
            this.$router.push('/post');
        },
        // 保存数据
        save() {
            var that = this;
            var data = {};
            data.memberResumeInfo = that.storeData;
            data.memberResumeInfo.wageUpper = parseInt(data.memberResumeInfo.wageUpper);
            data.memberResumeInfo.wageLower = parseInt(data.memberResumeInfo.wageLower);
            data.resumeIndustryInfoList = that.$store.state.resumeIndustryInfoList;
            if(JSON.stringify(data.memberResumeInfo.jobHuntStatus) != "" && data.memberResumeInfo.profession && data.memberResumeInfo.jobCategory && data.memberResumeInfo.wageLower && data.memberResumeInfo.wageUpper && data.memberResumeInfo.workPlace) {
                that.api.post('/personnel/h5/resumeInfo/addOrEditJobHunt', data).then(res => {
                    if(res.code) {
                        this.$store.commit('setresumeqz', {});
                        this.$store.commit('setresumeIndustryInfoList', []);
                        this.$store.commit('setresumeName', []);
                        this.$router.replace('/resume');
                    }
                })
            } else {
                Toast('请填写全部信息');
            }
        }
    }
}
</script>

<style scoped>
#intention {
    width: 100%;
    height: 100%;
}
.title {
    padding: 0.48rem 0.32rem 0 0.32rem;
}
.title_tip {
    padding-top: 0.08rem;
}
.job {
    padding-top: 0.24rem;
    padding-bottom: 0.22rem;
    border-bottom: 0.02rem solid #E8E9EC;
}
.pt52 {
    padding-top: 0.52rem;
}
.job1 {
    border-radius: 0.08rem;
    overflow: auto;
}
.job_content {
    padding: 0.12rem 0;
    width: 1.48rem;
    border: 0.02rem solid #428FFC;
}
.job_content:first-child {
    border-right: 0;
    border-radius:  0.08rem 0 0 0.08rem;
}
.job_content:last-child {
    border-radius: 0 0.08rem 0.08rem 0;
    border-left: 0;

}
.active {
    background-color: #428FFC;
    color: white;
}
.unactive {
    background-color: #FFFFFF;
    color: #428FFC;
}
.job_max {
    min-height: 0.44rem;
    padding-top: 0.08rem;
}
.jobimg_width {
    width: 0.32rem;
}
.save {
    width: 6.86rem;
    padding: 0.24rem 0;
    background: #428FFC;
    color: white;
    margin-top: 0.4rem;
    border-radius: 0.48rem;
}
</style>